
import * as echarts from 'echarts'
//画圆柱的椭圆顶部
function pathEllipse(ctx, centerX, centerY, a, b) {
  var k = 0.5522848,
    ox = a * k, // 水平控制点偏移量
    oy = b * k // 垂直控制点偏移量
  //从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
  ctx.moveTo(centerX - a, centerY)
  ctx.bezierCurveTo(
    centerX - a,
    centerY - oy,
    centerX - ox,
    centerY - b,
    centerX,
    centerY - b
  )
  ctx.bezierCurveTo(
    centerX + ox,
    centerY - b,
    centerX + a,
    centerY - oy,
    centerX + a,
    centerY
  )
  ctx.bezierCurveTo(
    centerX + a,
    centerY + oy,
    centerX + ox,
    centerY + b,
    centerX,
    centerY + b
  )
  ctx.bezierCurveTo(
    centerX - ox,
    centerY + b,
    centerX - a,
    centerY + oy,
    centerX - a,
    centerY
  )
  ctx.closePath()
  ctx.stroke()
}
//画圆柱的侧面
function pathBottom(ctx, centerX, centerY, a, b, bottomYAxis) {
  var k = 0.5522848,
    ox = a * k, // 水平控制点偏移量
    oy = b * k // 垂直控制点偏移量
  const [x, y] = [centerX, centerY]
  ctx.moveTo(x + a, y) //椭圆右端点开始顺时针绘制两条曲线
  ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b)
  ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y)
  ctx.lineTo(x - a, bottomYAxis) //从上到下的直线
  const [bx, by] = [centerX, bottomYAxis] //底部椭圆左侧端点开始逆时针绘制两条曲线
  ctx.bezierCurveTo(bx - a, by + oy, bx - ox, by + b, bx, by + b)
  ctx.bezierCurveTo(bx + ox, by + b, bx + a, by + oy, bx + a, by)
  ctx.lineTo(bx + a, centerY) //从下到上的直线
  ctx.closePath()
  ctx.stroke()
}


// 注册椭圆
echarts.graphic.registerShape('shapeEllipse', echarts.graphic.extendShape({
  shape: {},
  buildPath(ctx, shape) {
    const { EllipseBaseData, EllipsePosition } = shape
    pathEllipse(
      ctx,
      EllipsePosition.centerX,
      EllipsePosition.centerY,
      EllipseBaseData.a,
      EllipseBaseData.b
    )
  }
}))
// 注册圆柱侧面
echarts.graphic.registerShape('shapeCylinderSide', echarts.graphic.extendShape({
  shape: {},
  buildPath(ctx, shape) {
    const { EllipseBaseData, EllipsePosition } = shape
    pathBottom(
      ctx,
      EllipsePosition.centerX,
      EllipsePosition.centerY,
      EllipseBaseData.a,
      EllipseBaseData.b,
      EllipsePosition.bottomYAxis
    )
  }
}))
export const getColumn1Init = (columnList, data, total, color, dom) => {
  const option = {
    xAxis: {
      data: 10,
      show: false
    },
    yAxis: {
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        formatter: () => {
          return ''
        }
      }
    },
    series: [
      {
        data: data,
        type: 'custom',
        itemStyle: {
          color: () => {
            return (color)
          }
        },
        renderItem: (params, api) => {
          let height = dom.offsetHeight
          let width = dom.offsetWidth - 20
          let conHeight = height - 26
          // 基础坐标
          const basicsCoord = api.coord([api.value(0), api.value(1)])
          // 圆柱底部 y 轴
          const bottomYAxis = conHeight + 13
          // const bottomYAxis = api.coord([api.value(0), 0])[1]
          // 背景圆柱顶部 y 轴
          // const bgTopYAxis = api.coord([api.value(0), total])[1]
          const cly = conHeight - conHeight * (api.value(1) / total) + 13
          const EllipseBaseData = {
            //椭圆的数据
            a: width * 0.5, //半长轴
            b: 5 //半短轴
          }
          return {
            type: 'group',
            children: [
              {
                type: 'shapeEllipse', //背景顶部的椭圆
                shape: {
                  EllipseBaseData,
                  EllipsePosition: {
                    centerX: basicsCoord[0],
                    centerY: 13
                  }
                },
                style: {
                  fill: api.style().fill.replace(', 1)', ', 0.4)')
                }
              },
              {
                type: 'shapeCylinderSide', //背景椭圆的侧面
                shape: {
                  EllipseBaseData,
                  EllipsePosition: {
                    centerX: basicsCoord[0],
                    centerY: 13,
                    bottomYAxis
                  }
                },
                style: {
                  fill: api.style().fill.replace(', 1)', ', 0.2)')
                }
              },
              {
                type: 'shapeEllipse', //实际顶部的椭圆
                shape: {
                  EllipseBaseData,
                  EllipsePosition: {
                    centerX: basicsCoord[0],
                    centerY: cly
                  }
                },
                style: {
                  fill: api.style().fill
                }
              },
              {
                type: 'shapeCylinderSide', //实际椭圆的侧面
                shape: {
                  EllipseBaseData,
                  EllipsePosition: {
                    centerX: basicsCoord[0],
                    centerY: cly,
                    bottomYAxis
                  }
                },
                style: {
                  fill: api.style().fill.replace(', 1)', ', 0.6)')
                }
              },
              {
                type: 'text', //圆柱顶部数据 xx%
                style: {
                  text: Math.round(api.value(1) * 100 / total) + '%',
                  fontSize: 14,
                  x: basicsCoord[0],
                  y: cly - 3,
                  align: 'center',
                  verticalAlign: 'middle',
                  fill: '#fff'
                }
              }
            ]
          }
        }
      }
    ]
  }

  columnList.setOption(option, true)
  window.addEventListener("resize", columnList.resize())
}